<!--eslint-disable-->
<template>
	<div>	
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-remmend :list="recommendList"></home-remmend>
		<home-weekend :list = "weekendList"></home-weekend>
	</div>
</template>
<script>
	import HomeHeader from './components/header'
	import HomeSwiper from './components/swiper'
	import HomeIcons  from './components/icons'
	import HomeRemmend  from './components/recommend'
	import HomeWeekend  from './components/weekend'
	import axios from 'axios'
	import {mapState} from 'vuex'
	export default {
		name: 'Home',
		components:{
			HomeHeader,
			HomeSwiper,
			HomeIcons,
			HomeRemmend,
			HomeWeekend
		},
		data:function(){
			return{				
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[],
				lastCity:""
				
			}
		},
		computed:{
			...mapState(['city'])
		},
		methods:{
			getHomeInfo:function(){
				axios.get('/api/index.json?city='+ this.city)//链接已经被重定向
				.then(this.getHomeinfoSucc)
			},
			getHomeinfoSucc:function(data){				
				data = data.data
				console.log(data)
				if(data.ret&&data.data){
					var res = data.data					
					this.swiperList = res.swiperList
					this.iconList = res.iconList
					this.recommendList = res.recommendList
					this.weekendList = res.weekendList
				}				
			}
		},
		mounted:function(){
			this.getHomeInfo()
			this.lastCity = this.city
			//有keepalive 的时候 只有第一次的时候会执行加载数据
		},
		activated:function(){
			//有keepalive 的时候 新增的生命周期函数acitived  会总是执行
			if(this.lastCity !== this.city){
				this.lastCity = this.city
				this.getHomeInfo()
			}
		}
	}
</script>
<style>

</style>